<template>
	<view>
		<view class="" v-if="!loading">
			<web-view ref="web_view" id="" :src="webViewUrl" @message="getMessage"></web-view>
		</view>
		<view class="mount" v-else>
			导出下载图片中，请稍后...
		</view>
	</view>
</template>
<script setup>
import {
	onMounted,
	ref,
	defineProps,
	watch,
	reactive,

	getCurrentInstance
} from 'vue'
import {
	onLoad,
	onShow
} from "@dcloudio/uni-app";
import { RSAencrypt, RSAdecrypt } from "../../utils/rsa.js"
const loading = ref(true)
const {
	ctx
} = getCurrentInstance();

const getMessage = (e) => {
	console.log('data=======', e);
	console.log(e.detail.data[0].image, 'rrrrrrrrrrrrrrrrrr');
	 uni.setStorageSync('loading',e.detail.data[0].image);
	loading.value = true
	// 处理截图信息
	// let baseImg =
	
	// 	receiveRenderData(baseImg)

	// 'https://www.chargesystem.cn/assets/rttt-CB5eiXut.png' //
	// let baseUrl = 'https://www.chargesystem.cn/charge4gv2/sys/common/download/' + e.detail.data[0].image
	console.log('33333')
	let baseUrl = 'https://www.chargesystem.cn/charge4gv2/sys/common/download/' + e.detail.data[0].image
	// console.log(baseUrl,'baseUrl调整')
	uni.getSetting({
		success: function (res) {
			if (res.authSetting['scope.writePhotosAlbum']) {
				console.log('授权成功开始下载')
				// 判断授权成功开始下载
				handleBtn(baseUrl)
			} else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
				// 判断授权成功开始下载
				handleBtn(baseUrl)
			} else {
				// 判断授权失败，弹框提示用户授权
				uni.showModal({
					title: '提示',
					content: '需要授权保存相册',
					showCancel: true,
					success: function (resShow) {
						if (resShow.confirm) {
							// 弹出用户点击同意
							uni.openSetting({
								scope: 'scope.writePhotosAlbum',
								success: function (resOpen) {
									console.log('弹出用户点击同意授权成功开始下载')
									// 授权成功开始下载
									handleBtn(baseUrl)
								},
								fail: function (errorOpen) {
									// 授权失败输出错误信息
									console.log(errorOpen, 'openSetting')
								}
							})
						} else {
							// 用户取消授权提示用户
							that.showToast('取消授权无法下载')
						}
					}
				})
			}
		},
		fail: function (error) {
			// 失败错误信息输出
			console.log(error, 'getSetting')
		}
	})
	
}
// https://www.chargesystem.cn/weixinh5/index.html


const handleBtn = (baseUrl) => {
	console.log('小程序保存图片方法', baseUrl)
loading.value = true
	// webViewUrl.value = `https://www.chargesystem.cn/weixinh5/index.html?vin=` + uni.getStorageSync('vin')
	let filename = new Date().getTime() + ".png";
	let filePath = uni.env.USER_DATA_PATH + "/" + filename
	console.log('filePath', filename, filePath);
	uni.downloadFile({
		url: baseUrl,
		filePath: filePath,
		success: function (ress) {
			console.log( 'baseUrl',ress, baseUrl)
			// uni.getImageInfo({
			// 	src: ress.tempFilePath,
				// success:function(resss){
					// console.log('小程序getImageInfo成功',resss)
					
					
					uni.saveImageToPhotosAlbum({
						// filePath: 'wxfile://usr/'+ new Date().getTime() + ".jpg",
						// filePath: ress.tempFilePath,
						// filePath: resss.path,
						// 模拟器返回路径 "http://tmp/W0HfAPrcWOjca401c4bcf44dd7df41a4561c5dd758b8.bin"
						// "tempFilePath": "wxfile://tmp_06276322aa288731bf93e92a6c17f47f458c0682731bb9f8.bin",
						filePath: filePath,
						success: function (res) {
							console.log(res)
					
							loading.value = false
							uni.showToast({
								title: '图片保存成功',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'success',
								//显示持续时间为 2秒
								duration: 1000
							})
					
							console.log('success', loading.value)
							if (res.statusCode === 200) {
								console.log('下载成功！');
							}
						},
						fail: function (res) {
							uni.showToast({
								title: 'saveImageToPhotosAlbum失败',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'success',
								//显示持续时间为 2秒
								duration: 1000
							})
							console.log(res)
							loading.value = false
							console.log('报错！', loading.value, res)
						}
					})
				// },
				
				// fail: function (err) {
				// uni.showToast({
				// 	title: 'getImageInfo失败',
				// 	//将值设置为 success 或者直接不用写icon这个参数
				// 	icon: 'success',
				// 	//显示持续时间为 2秒
				// 	duration: 1000
				// })
				// 	loading.value = false
				// 	console.log('小程序getImageInfo失败', err)
				// }
			// })
		
		},
		fail: function (err) {

			loading.value = false
			console.log('小程序下载图片失败failss', loading.value, err)
			loading.value = false
			uni.showToast({
				title: 'down失败',
				//将值设置为 success 或者直接不用写icon这个参数
				icon: 'success',
				//显示持续时间为 2秒
				duration: 1000
			})
		}
	})

}
let webViewUrl = ref('https://www.chargesystem.cn/weixinh5/index.html')
const myComponent = ref(null);

const getInfoAll = () => {
	let deOpenId = RSAencrypt(uni.getStorageSync('openid'))

	uni.request({
		url: 'https://www.chargesystem.cn/charge4gv2/wechat/getUserInfo', // 你的登录API地址
		method: 'GET',
		data: {
			openid: deOpenId// uni.getStorageSync('openid'),
		},
		success: (res) => {
			// userInfo.value = res.data.result
			// console.log(res.data.result.vin, 'res')

			//声明要传递给H5的参数
			let params = {
				data: res.data.result.vin
			}
			webViewUrl.value = `https://www.chargesystem.cn/weixinh5/index.html?vin=` + res.data.result
				.vin
			console.log(webViewUrl.value, 'res')
			loading.value = false
			console.log(webViewUrl.value, loading.value, 'res')
		},
		fail: () => {
			uni.showToast({
				title: '请求失败',
				icon: 'none'
			});
		}
	});
}


// saveBaseImgFile(base64) {  
//     const bitmap = new plus.nativeObj.Bitmap('base64')  
//     bitmap.loadBase64Data(base64, () => {  
//             const url = '_doc/' + new Date().getTime() + '.png'  
//             bitmap.save(  
//                 url,  
//                 {  
//                     overwrite: true // 是否覆盖  
//                     // quality: 'quality'  // 图片清晰度  
//                 },  
//                 (i) => {  
//                     uni.saveImageToPhotosAlbum({  
//                         filePath: url,  
//                         success: () => {  
//                             console.log('图片保存成功')  
//                             bitmap.clear()  
//                         }  
//                     })  
//                 },  
//                 (e) => {  
//                     console.log('图片保存失败')  
//                     bitmap.clear()  
//                 }  
//             )  
//         },  
//         (e) => {  
//             console.log('图片保存失败')  
//             bitmap.clear()  
//         }  
//     )  
// }  
// let oGrayImg_new = ''
//截取当前帧的图片


// // onShow(options) {
//     let pages = getCurrentPages();
//     let currentPage: any = pages[pages.length - 1];
//     const option: any = currentPage.options;
// 	console.log(option,'optionoption')
//     const url = decodeURIComponent(option.url);

//   },
const saveBaseImgFile = (base64) => {
	const bitmap = new plus.nativeObj.Bitmap('base64')
	bitmap.loadBase64Data(base64, () => {
		const url = '_doc/' + new Date().getTime() + '.png'
		bitmap.save(
			url, {
			overwrite: true // 是否覆盖  
			// quality: 'quality'  // 图片清晰度  
		},
			(i) => {
				uni.saveImageToPhotosAlbum({
					filePath: url,
					success: () => {
						console.log('图片保存成功')
						bitmap.clear()
					}
				})
			},
			(e) => {
				console.log('图片保存失败')
				bitmap.clear()
			}
		)
	},
		(e) => {
			console.log('图片保存失败')
			bitmap.clear()
		}
	)
}

// 跳转到登录页面
onShow((options) => {
	console.log('onShow')

	// if (uni.getStorageSync('isLogin') == true) {} else {
	// 	uni.reLaunch({
	// 		url: '/pages/login/login'
	// 	})
	// }

})
onLoad((daiCan) => {
	// 进来之后如果能获取vin 就直接展示H5页面 否则获取用户信息接口

	console.log('onLoad1111')
	let pages = getCurrentPages();
	let currentPage = pages[pages.length - 1];
	const option = currentPage.options;
	console.log('小程序页面加载222', option)
	if (option.jieTu) {
		loading.value = true
		let baseUrl = 'https://www.chargesystem.cn/charge4gv2/sys/common/download/' + option.jieTu
		console.log(baseUrl,'小程序页面加载222baseUrl调整')
		handleBtn(baseUrl)
	} else if (option.otherVin) {
		webViewUrl.value = `https://www.chargesystem.cn/weixinh5/index.html?vin=` + option.otherVin
		loading.value = false
		console.log('webview-loading', loading.value)
	} else if (uni.getStorageSync('vin')) {
		webViewUrl.value = `https://www.chargesystem.cn/weixinh5/index.html?vin=` + uni.getStorageSync('vin')
		loading.value = false
		console.log('webview-loading', loading.value)
	} else {
		getInfoAll()
	}


})
</script>
<style lang="scss" scoped>
.mount {
	font-size: 28rpx;
	padding-top: 40rpx;
}

.content {
	background: linear-gradient(89.59104588699104deg, rgba(37, 28, 93, 1) 5%, rgba(44, 31, 119, 1) 55.00000000000001%, rgba(36, 25, 102, 1) 96%);
	padding: 40rpx;
	position: relative;
}

.position_bgs {
	width: 100%;
	height: 600rpx;
	position: absolute;
	top: 0;
	left: 0
}

.bgs_san_jiao {
	position: absolute;
	top: 160rpx;
	left: 200rpx;
}

.bgs_san_jiao_left {
	width: 34rpx;
	height: 26rpx;
	transform: rotate(270deg);
	margin-right: 4rpx;
}

.bgs_san_jiao_center {
	width: 32rpx;
	height: 24rpx;
	transform: rotate(270deg);
	margin-right: 4rpx;
}

.bgs_san_jiao_right {
	width: 30rpx;
	height: 22rpx;
	transform: rotate(270deg);
}

.bgs_san_jiao2_left {
	width: 30rpx;
	height: 22rpx;
	transform: rotate(90deg);
	margin-right: 4rpx;
}

.bgs_san_jiao2_center {
	width: 32rpx;
	height: 24rpx;
	transform: rotate(90deg);
	margin-right: 4rpx;
}

.bgs_san_jiao2_right {
	width: 34rpx;
	height: 26rpx;
	transform: rotate(90deg);
}

.bgs_circle {
	position: absolute;
	right: 0;
	top: 0;
	width: 400rpx;
}

.qin_cir1 {
	position: absolute;
	right: 300rpx;
	top: 40rpx;
	width: 56rpx;
	height: 56rpx;
}

.qin_cir2 {
	position: absolute;
	right: 240rpx;
	top: 180rpx;
	width: 40rpx;
	height: 40rpx;
}

.qin_cir3 {
	position: absolute;
	right: 20rpx;
	top: 40rpx;
	width: 200rpx;
	height: 200rpx;
}

.qin_cir4 {
	position: absolute;
	right: 20rpx;
	top: 200rpx;
	width: 56rpx;
	height: 56rpx;
	z-index: 4;
}

.vin_card {
	font-family: '苹方-简 常规体', '苹方-简 中黑体', '苹方-简', sans-serif;
	margin-top: 80rpx;
	height: 50rpx;
	width: 280rpx;
	border-radius: 76rpx;
	background-color: rgba(222, 217, 255, 1);
	color: #271A73;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.34901960784313724);
	font-size: 30rpx;
	text-align: center;
	line-height: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tan_left {
	padding-top: 40rpx;
	/* width:80rpx; */
	/* height: 40rpx; */
	margin-top: 20rpx;

	margin-bottom: 12rpx;
}

.dian_ci {
	font-size: 60rpx;
	color: rgb(255, 243, 243);
	font-weight: 400;
	font-style: normal;


	letter-spacing: 6rpx;

}

.tan_right {
	position: absolute;
	top: 30rpx;
	left: 540rpx;
	margin-top: 20rpx;
	margin-bottom: 12rpx;
}

.dian {
	position: relative;
}

.bao_gao {
	display: flex;
	padding-top: 30rpx;
	padding-bottom: 40rpx;
	justify-content: space-between;
}

.bao_gao_left {
	width: 300rpx;
	text-indent: 10rpx;
	height: 46rpx;
	color: #fff;
	line-height: 46rpx;
	background: linear-gradient(90deg, rgba(73, 80, 188, 1) 0%, rgba(43, 31, 115, 1) 100%);
	overflow: hidden;
}

.bao_gao_right {
	width: 300rpx;
	text-indent: 10rpx;
	height: 46rpx;
	color: #fff;
	line-height: 46rpx;
	overflow: hidden;

	background: linear-gradient(90deg, rgba(73, 80, 188, 0.5) 0%, rgba(43, 31, 115, 0.5) 100%);
}

.scope {
	height: 80rpx;
	line-height: 80rpx;
	color: #fff;
	font-size: 40rpx;
	text-align: center;
	font-weight: 500;
}

.scope_wrap {
	display: flex;
	justify-content: center;
}

.scope_bom {
	width: 240rpx;
	height: 240rpx;
	background-image: url('../../static/images/healthy/u263.png');
	background-size: 100% 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 36px;
	color: #40d9ef;
}

.batter {
	padding-top: 30rpx;
	padding-bottom: 30rpx;
	font-size: 36rpx;
	text-align: center;
	color: #40d9ef;
	letter-spacing: 6rpx;
}

.batter_btn {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0 60rpx 0;

}

.batter_btn_left {
	width: 46%;
	height: 80rpx;
	line-height: 80rpx;
	color: #fff;
	text-align: center;
	padding-left: 30rpx;
	background: url('../../static/images/healthy/u266.svg');
	background: linear-gradient(180deg, rgba(38, 24, 125, 1) 0%, rgba(72, 78, 185, 1) 99%);

	/* background-size: 54rpx 42rpx; */
	background-repeat: no-repeat;
	border-radius: 20rpx;
	position: relative;

	image {
		position: absolute;
		left: 20rpx;
		top: 30rpx;
		width: 64rpx;
		height: 51rpx;
		z-index: 0;
	}

	text {
		position: relative;
		z-index: 3;
	}
}

.batter_btn_right {
	width: 46%;
	height: 80rpx;
	padding-left: 30rpx;
	line-height: 80rpx;
	color: #fff;
	text-align: center;
	background: linear-gradient(180deg, rgba(47, 29, 121, 1) 0%, rgba(149, 42, 162, 1) 98%);
	border-radius: 20rpx;
	position: relative;

	image {
		position: absolute;
		left: 20rpx;
		top: 30rpx;
		width: 64rpx;
		height: 51rpx;
		z-index: 0;
	}

	text {
		position: relative;
		z-index: 3;
	}
}

.batter_base {
	font-size: 40rpx;
	color: #fff;
	margin-bottom: 40rpx;
}

.base_con {
	width: 100%;
	height: 440rpx;
	border-radius: 20rpx;
	border: solid 1px #3e3091;
	background-color: #2c207b;
}

.base_con1 {
	display: flex;
	height: 140rpx;
	margin: 0 20rpx;
	justify-content: space-around;
	border-bottom: solid 1px #3655a0;
}

.base_con2 {
	display: flex;
	height: 140rpx;
	margin: 0 20rpx;
	justify-content: space-around;
	border-bottom: solid 1px #3655a0;
}

.base_con3 {
	display: flex;
	height: 140rpx;
	margin: 0 20rpx;
	justify-content: space-around;
}

.base_item {
	width: 30%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

}

.con_name {
	padding-top: 20rpx;
	font-size: 24rpx;
	color: #a8a3cc;
	margin-bottom: 12rpx;
	position: relative;
	text-indent: 20rpx;
}

.con_name::before {
	content: '';
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
	background-color: #40d9ef;
	position: absolute;
	top: 34rpx;
	left: 0rpx;
}

.con_value {
	font-size: 32rpx;
	color: #fff;
	margin-bottom: 40rpx;
}

.ansy {
	display: flex;
	padding: 50rpx 0;
	justify-content: space-between;
	align-items: center;
}

.ansy_left {
	color: #fff;
	font-size: 40rpx;
	position: relative;
	/* border-left: solid 6rpx #952aa2; */
	padding-left: 20rpx;
}

.ansy_left::before {
	content: '';
	width: 8rpx;
	display: block;
	height: 36rpx;
	background-color: #952aa2;
	position: absolute;
	top: 12rpx;
	color: #fff;
	left: 0;
}

.ansy_right {
	border: solid 1px #443699;
	border-radius: 30rpx;
	height: 50rpx;
	line-height: 50rpx;
	text-align: center;
	color: #287ee0;
	padding: 0 10rpx;
	font-size: 20rpx;
	margin-bottom: 60rpx;
}

.ansy_btn_wrap {
	margin: 0 auto;
	display: flex;
	justify-content: center;
}

.ansy_btn {
	width: 60%;
	height: 60rpx;
	color: #3fcce8;
	text-align: center;
	border: solid 1px #2e51b9;
	line-height: 60rpx;
	font-size: 26rpx;
	border-radius: 10rpx;
	// background-color: #2b2086;
	background: linear-gradient(180deg, rgba(38, 24, 125, 1) 0%, rgba(72, 78, 185, 1) 99%);
	margin-bottom: 80rpx;
	position: relative;

	image {
		position: absolute;
		top: 10rpx;
		left: 20rpx;
		width: 50rpx;
		height: 40rpx;
	}
}

.ansy_date_btn {
	display: flex;
	color: #fff;
	font-size: 24rpx;
	align-items: center;
}

.date_mounth {
	color: #2772d0;
}

.date_division {
	margin: 0 12rpx;
}



.charge_analysis_item {

	.charge_analysis_value {
		text-align: center;
		color: #288beb;
		font-size: 40rpx;
		margin-bottom: 20rpx;
	}

	.charge_analysis_name {
		color: #fff;
		font-size: 26rpx;
	}
}

.charge_analysis {
	display: flex;
	justify-content: space-between;
	margin-bottom: 60rpx;

	view:nth-child(2) {
		.charge_analysis_value {
			color: red;
		}
	}

	view:nth-child(3) {
		.charge_analysis_value {
			color: red;
		}
	}
}

.order_item {
	display: flex;
	color: #fff;
	font-size: 28rpx;
	align-items: center;
	height: 60rpx;
	line-height: 60rpx;
	margin-bottom: 20rpx;
}

.order_icon {
	width: 18rpx;
	height: 18rpx;
	border-radius: 50%;
	background-color: #595ede;
	margin-right: 12rpx;
}

.order_type {
	width: 30%;
	height: 60rpx;
	overflow: hidden;
	text-indent: 10rpx;
	background: linear-gradient(90deg, rgba(73, 80, 188, 1) 0%, rgba(43, 31, 115, 1) 100%);
}

.order_di {
	margin: 0 10rpx;

}

.order_name {
	width: 60%;
	overflow: hidden;
	height: 60rpx;
}

.order_wrap {
	display: flex;
	justify-content: center;
	padding-top: 30rpx;
}

.order_btn {
	width: 200rpx;
	height: 60rpx;
	color: #3fcce8;
	text-align: center;
	border: solid 1px #2e51b9;
	line-height: 60rpx;
	font-size: 26rpx;
	border-radius: 10rpx;
	background-color: #2b2086;
	margin-bottom: 80rpx;

}

.health_major {
	color: #fff;
	font-size: 40rpx;
	position: relative;
	height: 60rpx;
	line-height: 60rpx;
}

.major_name {
	position: relative;
	z-index: 4;
}

.major_1 {
	position: absolute;
	top: -14rpx;
	left: 0rpx;
	width: 65rpx;
	height: 45rpx;
}

.major_2 {
	position: absolute;
	top: -14rpx;
	left: 0rpx;
	width: 65rpx;
	height: 45rpx;
}

.major_3 {
	position: absolute;
	top: 15rpx;
	left: 340rpx;
	width: 34rpx;
	height: 34rpx;
}

.major_4 {
	position: absolute;
	top: 15rpx;
	left: 368rpx;
	width: 34rpx;
	height: 34rpx;
}

.batter_3 {
	left: 260rpx
}

.batter_4 {
	left: 288rpx;
}

/* .charge_1{
	left: 340rpx;
}
.charge_2{
	left: 328rpx;
} */
.soc_tit {
	width: 100%;
	padding: 10rpx 20rpx;
	line-height: 34rpx;
	color: #fff;
	background: #2c207b;
	border: solid 1px #3d2f8e;
	border-radius: 12rpx;
	font-weight: 300;
	font-size: 24rpx;
}

.soc_by {
	text-indent: 30rpx;
	position: relative;

	image {
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		left: 20rpx;
		top: 16rpx;

	}

	background-image: url('../../static/images/healthy/u445.svg');
	background-size: 100% 100%;
}

.soc_sin {
	text-indent: 30rpx;
	position: relative;

	image {
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		left: 20rpx;
		top: 16rpx;

	}

	background-image: url('../../static/images/healthy/u448.svg');
	background-size: 100% 100%;
}

.input {
	width: 360rpx;
	height: 48rpx;
	border: solid 2rpx #ded9ff;
	background-color: #ded9ff;
	border-radius: 10rpx;
	padding: 0 20rpx;
}

.inputWrap {
	padding-top: 100rpx;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 100;

	.search {
		margin-left: 20rpx;
		width: 80rpx;
		height: 48rpx;
		line-height: 48rpx;
		background-color: #3c3aa3;
		color: #2b80eb;
		text-align: center;
		border: solid 1px #2b80eb;
	}
}

.mount {
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>